﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Web Symbols | DEMO</title>
	<style type="text/css">
	body{
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	background: #fff url(bg.jpg) repeat top left;
	font-weight: 400;
	font-size: 15px;
	color: #1d3c41;
	width: 600px;
	margin: 10px auto;
}
a{
	color: #333;
	text-decoration: none;
}
header{
	padding: 20px 30px 10px 30px;
	margin: 0px 20px 10px 20px;
	position: relative;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
header h1{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 35px;
	line-height: 35px;
	position: relative;
	font-weight: 400;
	color: rgba(26,89,120,0.9);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    padding: 0px 0px 5px 0px;
}
header h1 span{
	color: #7cbcd6;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
nav{
	text-align:center;
	display: block;
	padding: 14px;
}
nav a,
nav a.current-demo,
nav a.current-demo:hover{
    display: inline-block;
	font-style: italic;
	font-size: 12px;
	padding: 3px 5px;
	margin:5px 3px;
	font-weight: 800;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.05) inset;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	background: rgba(104,171,194,0.5);
}
nav a:hover{
	background: #4fa2c4;
}
nav a.current-demo,
nav a.current-demo:hover{
	color: rgba(104,171,194,1);
	background: rgba(255,255,255,0.9);
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
}
section {
	margin-top: 20px;
}
		@font-face{ 
			font-family: 'WebSymbolsRegular';
			src: url('websymbols/fonts/websymbols-regular-webfont.eot');
			src: url('websymbols/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
					 url('websymbols/fonts/websymbols-regular-webfont.woff') format('woff'),
					 url('websymbols/fonts/websymbols-regular-webfont.ttf') format('truetype'),
					 url('websymbols/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
		}
		/*Web Symbols*/
		.websymbols {
			width: 530px;
			margin: 10px auto;
		}
		.glyphbox {
			overflow: hidden;
		}
		.glyphbox div {
			width: 50px;
			display: inline-block;
			padding: 5px;
			text-align: center;
			border: 1px solid #ccc;
			margin: 5px 0;
		}
		.glyphbox div span {
			font-family: 'WebSymbolsRegular';
		}
	</style>
</head>
<body>
	<header>
		<h1>Web Font Icon</h1>
		<nav>
			<a href="index.html">Guifx</a>
			<a href="demo2.html" class="current-demo">Websymbols</a>
			<a href="demo3.html">FontAwesome</a>
		</nav>
	</header>
	<div class="websymbols">
		<div class="glyphbox">
			<div><span>I</span><p><b>I</b></p></div>
			<div><span>S</span><p><b>S</b></p></div>
			<div><span>C</span><p><b>C</b></p></div>
			<div><span>F</span><p><b>F</b></p></div>
			<div><span>Z</span><p><b>Z</b></p></div>
			<div><span>M</span><p><b>M</b></p></div>
			<div><span>H</span><p><b>H</b></p></div>
			<div><span>T</span><p><b>T</b></p></div>
			<div><span>_</span><p><b>_</b></p></div>
			<div><span>A</span><p><b>A</b></p></div>
			<div><span>X</span><p><b>X</b></p></div>
			<div><span>n</span><p><b>n</b></p><p></p></div>
			<div><span>o</span><p><b>o</b></p><p></p></div>
			<div><span>p</span><p><b>p</b></p></div>
			<div><span>q</span><p><b>q</b></p></div>
			<div><span>~</span><p><b>~</b></p></div>
			<div><span>U</span><p><b>U</b></p></div>
			<div><span>w</span><p><b>w</b></p></div>
			<div><span>x</span><p><b>x</b></p></div>
			<div><span>a</span><p><b>a</b></p></div>
			<div><span>b</span><p><b>b</b></p></div>
			<div><span>`</span><p><b>`</b></p></div>
			<div><span>+</span><p><b>+</b></p></div>
			<div><span>-</span><p><b>-</b></p></div>
			<div><span>:</span><p><b>:</b></p></div>
			<div><span>;</span><p><b>;</b></p></div>
			<div><span>×</span><p><b>×</b></p></div>
			<div><span>&amp;</span><p><b>&amp;</b></p></div>
			<div><span>(</span><p><b>(</b></p></div>
			<div><span>)</span><p><b>)</b></p></div>
			<div><span>&lt;</span><p><b>&lt;</b></p></div>
			<div><span>&gt;</span><p><b>&gt;</b></p></div>
			<div><span>*</span><p><b>*</b></p></div>
			<div><span>'</span><p><b>'</b></p></div>
			<div><span>t</span><p><b>t</b></p></div>
			<div><span>f</span><p><b>f</b></p></div>
			<div><span>v</span><p><b>v</b></p></div>
			<div><span>l</span><p><b>l</b></p></div>
			<div><span>g</span><p><b>g</b></p></div>
			<div><span>s</span><p><b>s</b></p></div>
			<div><span>r</span><p><b>r</b></p></div>
			<div><span>m</span><p><b>m</b></p></div>
			<div><span>y</span><p><b>y</b></p></div>
			<div><span>k</span><p><b>k</b></p></div>
			<div><span>z</span><p><b>z</b></p></div>
			<div><span>Q</span><p><b>Q</b></p></div>
			<div><span>B</span><p><b>B</b></p></div>
			<div><span>R</span><p><b>R</b></p></div>
			<div><span>,</span><p><b>,</b></p></div>
			<div><span>c</span><p><b>c</b></p></div>
			<div><span>d</span><p><b>d</b></p></div>
			<div><span>e</span><p><b>e</b></p></div>
			<div><span>u</span><p><b>u</b></p></div>
			<div><span>?</span><p><b>?</b></p></div>
			<div><span>N</span><p><b>N</b></p></div>
			<div><span>O</span><p><b>O</b></p></div>
			<div><span>L</span><p><b>L</b></p></div>
			<div><span>J</span><p><b>J</b></p></div>
			<div><span>D</span><p><b>D</b></p></div>
			<div><span>P</span><p><b>P</b></p></div>
			<div><span>K</span><p><b>K</b></p></div>
			<div><span>@</span><p><b>@</b></p></div>	
			<div><span>{</span><p><b>{</b></p></div>
			<div><span>}</span><p><b>}</b></p></div>
			<div><span>[</span><p><b>[</b></p></div>
			<div><span>]</span><p><b>]</b></p></div>
			<div><span>¹</span><p><b>¹</b></p></div>
			<div><span>²</span><p><b>²</b></p></div>
			<div><span>³</span><p><b>³</b></p></div>
			<div><span>h</span><p><b>h</b></p></div>
			<div><span>i</span><p><b>i</b></p></div>
			<div><span>j</span><p><b>j</b></p></div>
			<div><span>%</span><p><b>%</b></p></div>
			<div><span>.</span><p><b>.</b></p></div>
			<div><span>/</span><p><b>/</b></p></div>
			<div><span id="loader">1</span><script type="text/javascript">var loaderSymbols = ['0', '1', '2', '3', '4', '5', '6', '7'], loaderRate = 100, loaderIndex = 0, loader= function() { document.getElementById('loader').innerHTML = loaderSymbols[loaderIndex]; loaderIndex = loaderIndex  &lt; loaderSymbols.length - 1 ? loaderIndex + 1 : 0; setTimeout(loader, loaderRate); }; loader(); </script><p><b>0&mdash;7</b></p></div>
			<div><span>W</span><p><b>W</b></p></div>	
			<div><span>V</span><p><b>V</b></p></div>
		</div>
	</div>	
</body>
</html>